<div>
	<div class="breadcrumb">
		<a class="prev" onclick="history.go(-1)"></a>
		<a class="next" onclick="history.go(1)"></a>
	</div>
	<div class="tab-title">
		{{'user.add'|translate}}
	</div>
	<form nz-form [formGroup]="validateForm" class="tour-form user-form">
		<div nz-row [nzGutter]="24">
			<div nz-col [nzSpan]="24">
				<nz-form-item nzFlex>
					<nz-form-label nzRequired nzFor="loginId">{{'user.loginId'|translate}}</nz-form-label>
					<nz-form-control>
						<input nz-input placeholder="{{'placeholder.input'|translate}}{{'user.loginId'|translate}}" id="loginId" name="loginId" formControlName="loginId" />
					</nz-form-control>
				</nz-form-item>
			</div>
			<div nz-col [nzSpan]="24">
				<nz-form-item nzFlex>
					<nz-form-label nzRequired nzFor="mobile">{{'user.mobile'|translate}}</nz-form-label>
					<nz-form-control>
						<input nz-input placeholder="{{'placeholder.input'|translate}}{{'user.mobile'|translate}}" id="mobile" name="mobile" formControlName="mobile" />
					</nz-form-control>
				</nz-form-item>
			</div>
			<div nz-col [nzSpan]="24">
				<nz-form-item nzFlex>
					<nz-form-label nzRequired nzFor="email">{{'user.email'|translate}}</nz-form-label>
					<nz-form-control>
						<input nz-input placeholder="{{'placeholder.email'|translate}}{{'user.loginId'|translate}}" id="email" name="email" formControlName="email" />
					</nz-form-control>
				</nz-form-item>
			</div>
			<div nz-col [nzSpan]="24">
				<nz-form-item nzFlex>
					<nz-form-label nzRequired nzFor="imageCode">{{'user.imageCode'|translate}}</nz-form-label>
					<nz-form-control>
						<nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton">
							<input nz-input placeholder="{{'placeholder.imageCode'|translate}}{{'user.loginId'|translate}}" id="imageCode" name="imageCode" formControlName="imageCode" />
						</nz-input-group>
						<ng-template #suffixIconButton>
							<img (click)="onChangImgCode()" style="height:32px;border-radius: 0 4px 4px 0;" src="/api/generateImageVerifyCode.do?imageVerifyCodeId={{imageVerifyCodeId}}&k={{e}}" />
						</ng-template>
					</nz-form-control>
				</nz-form-item>
			</div>
			<div nz-col [nzSpan]="24">
				<nz-form-item nzFlex>
					<nz-form-label nzRequired nzFor="verifyCode">{{'user.verifyCode'|translate}}</nz-form-label>
					<nz-form-control>
						<nz-input-group [nzSuffix]="suffixTemplate" [nzPrefix]="prefixTemplate">
							<input nz-input placeholder="{{'placeholder.verifyCode'|translate}}{{'user.loginId'|translate}}" id="verifyCode" name="verifyCode" formControlName="verifyCode" />
						</nz-input-group>
						<ng-template #suffixTemplate><a (click)="sendCode($event)">{{'cz.sendCode'|translate}}</a></ng-template>
					</nz-form-control>
					
				</nz-form-item>
			</div>
			<div nz-col [nzSpan]="24">
				<nz-form-item nzFlex>
					<nz-form-label nzRequired nzFor="loginPw">{{'user.loginPw'|translate}}</nz-form-label>
					<nz-form-control>
						<input nz-input placeholder="{{'user.loginPwP'|translate}}" type="password" id="loginPw" name="loginPw" formControlName="loginPw" />
					</nz-form-control>
				</nz-form-item>
			</div>
			<div nz-col [nzSpan]="24">
				<nz-form-item nzFlex>
					<nz-form-label nzRequired nzFor="reLoginPw">{{'user.reLoginPw'|translate}}</nz-form-label>
					<nz-form-control>
						<input nz-input placeholder="{{'user.reLoginPwP'|translate}}" type="password" id="reLoginPw" name="reLoginPw" formControlName="reLoginPw" />
					</nz-form-control>
				</nz-form-item>
			</div>
			<div nz-col [nzSpan]="24">
				<nz-form-item nzFlex>
					<nz-form-label nzRequired nzFor="level">{{'user.level'|translate}}</nz-form-label>
					<nz-form-control>
						<nz-select style="width: 200px;" formControlName="level" [nzAllowClear]="true" (ngModelChange)="changeLevel($event)">
							<nz-option [nzLabel]="userLevel.vip" nzValue="vip"></nz-option>
							<nz-option [nzLabel]="userLevel.normal" nzValue="normal"></nz-option>
						</nz-select>
					</nz-form-control>
				</nz-form-item>
			</div>
			<div nz-col [nzSpan]="24" *ngIf="validateForm.get('level').value === 'vip'">
				<nz-form-item nzFlex>
					<nz-form-label nzRequired nzFor="name">{{'user.vipExpireTime'|translate}}</nz-form-label>
					<nz-form-control>
						<nz-select style="width: 200px;" formControlName="vipExpireType" (ngModelChange)="changeExpireType($event)">
							<nz-option [nzLabel]="vipExpireType.a" nzValue="1"></nz-option>
							<nz-option [nzLabel]="vipExpireType.b" nzValue="2"></nz-option>
						</nz-select>
						<nz-date-picker *ngIf="validateForm.get('vipExpireType').value == 2" [nzStyle]="{'width': '200px','margin-left': '20px'}" formControlName="vipExpireTime"></nz-date-picker>
					</nz-form-control>
				</nz-form-item>
			</div>
		</div>
        <div class="cz">
            <a class="submit-btn" (click)="submit()">{{'cz.submit'|translate}}</a>
            <a class="default-btn" routerLink="/basicSetting/users">{{'cz.cancel'|translate}}</a>
        </div>
	</form>
</div>
